<!-- GIVe.refLinkDialog
  Show references as either numbers or texts, when tapped/clicked a paper-dialog
  showing everything inside the tag will appear near the link
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../genemo-styles.html">
<link href="https://fonts.googleapis.com/css?family=Roboto:500,400italic,700italic,700,400" rel="stylesheet" type="text/css">
<dom-module id="ref-link-dialog">
  <template>
    <style include="genemo-shared-styles">
      :host {
        display: inline-block;
      }
      span#refLink {
        text-decoration: underline;
        cursor: pointer;
        color: var(--accent-color);
      }
      paper-dialog {
        margin: 5px;
      }
    </style>
    <span on-tap="_openRef" id="refLink">[[refLinkText]]</span>
    <paper-dialog id="refDialog" no-overlap auto-fit-on-attach
      horizontal-align="left" vertical-align="top">
      <div>
        <content></content>
      </div>
    </paper-dialog>
  </template>

  <script>
    var GIVe = (function (give) {
      'use strict'

      give.RefLinkDialog = Polymer({
        is: 'ref-link-dialog',

        properties: {

          refLinkText: {
            type: String,
            value: 'ref'
          }
        },

        ready: function () {
          this.$.refDialog.positionTarget = this.$.refLink
        },

        _openRef: function () {
          this.$.refDialog.open()
        }
      })

      return give
    })(GIVe || {})
    </script>
</dom-module>
